<template>
	<view>
		<!-- 头部导航栏 -->
		<cus-navbar ref="navbar"></cus-navbar>
		
		<!-- 页面组件 -->
		<Home ref="home" v-show="current==0" @goActive="goActive"></Home>
		<Order ref="order" v-show="current==1"></Order>
		<Mine ref="mine" v-show="current==2"></Mine>
		
		<!-- 底部导航栏 -->
		<view class="gap-200"></view>
		<view class="tabbar-box flex flex-direction justify-end">
			<image src="../../static/tabbar/order.png" class="tabbar-outsideIcon" @click="onTabbarTap(1)"></image>
			<view class="tabbar size-24 flex justify-between align-center">
				<view class="text-center" v-for="(item,index) in tabbar" :key="index" @click="onTabbarTap(index)">
					<image :src="index==current?item.selectedIconPath:item.iconPath" class="img-44"></image>
					<view :class="index==current?'color-main':'color-9'">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Home from './Home.vue'
	import Order from './Order.vue'
	import Mine from './Mine.vue'
	import { setAddress, setToken, getToken } from '@/config/storage.js'
	export default {
		components: {
			Home,
			Order,
			Mine
		},
		data() {
			return {
				inviter_code:'',
				current: 0
			}
		},
		computed: {
			tabbar() {
				return [{
						name: this.$t('index2'),// 首页
						iconPath: '/static/tabbar/home.png',
						selectedIconPath: '/static/tabbar/homeHL.png'
					},
					{
						name: this.$t('index3'),// 订单
						iconPath: '',
						selectedIconPath: ''
					},
					{
						name: this.$t('index4'),// 我的
						iconPath: '/static/tabbar/mine.png',
						selectedIconPath: '/static/tabbar/mineHL.png'
					}
				]
			}
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			loadData(refresh){
				this.$api.post('/data/api.auth.center/get').then(res=>{
					this.$store.commit('user/setMineData', res.user)
					if(refresh)uni.stopPullDownRefresh()
				})
			},
			refresh(){
				if(this.current==0)this.$refs.home.loadData(true,true)
				else if(this.current==1) this.$refs.order.loadData(true,true)
				else this.loadData(true)
			},
			onTabbarTap(index){
				if(this.current==index)return
				this.current = index
			},
			goActive(){
				this.$refs.navbar.openActive()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #0B0C15, #0B0C15);
	}

	.tabbar-box {
		width: 100vw;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		
		.tabbar-outsideIcon{
			width: 84rpx;
			height: 84rpx;
			position: absolute;
			top: 0;
			left: 333rpx;
		}

		.tabbar {
			width: 100%;
			height: 100rpx;
			background-color: #03020A;
			border-radius: 40rpx;
			padding: 0 100rpx;
		}
	}
</style>